<template>
  <el-container>
    <el-header style="margin: 10px">
      <el-row>
        题目类型
      </el-row>
    </el-header>
    <el-main style="margin: 10px">
      <el-row class="grid-content">
        <el-col :span="6">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: coral" @click="searchType('顺序结构')">顺序结构</el-button>
        </el-col>
        <el-col :span="6">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: #cccccc" @click="searchType('选择结构')">选择结构</el-button>
        </el-col>
        <el-col :span="6">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: coral" @click="searchType('循环结构')">循环结构</el-button>
        </el-col>
        <el-col :span="6">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: chartreuse" @click="searchType('函数')">函数</el-button>
        </el-col>
      </el-row>
      <el-row class="grid-content">
        <el-col :span="4">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: aqua" @click="searchType('字符串与数组')">字符串与数组</el-button>
        </el-col>
        <el-col :span="4">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: gold" @click="searchType('结构体和文件')">结构体和文件</el-button>
        </el-col>
        <el-col :span="4">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: tan" @click="searchType('堆和栈')">堆和栈</el-button>
        </el-col>
        <el-col :span="4">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: deepskyblue" @click="searchType('GESP')">GESP</el-button>
        </el-col>
        <el-col :span="4">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: darkorange" @click="searchType('贪心')">贪心</el-button>
        </el-col>
        <el-col :span="4">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: burlywood" @click="searchType('动态规划')">动态规划</el-button>
        </el-col>
      </el-row>
      <el-row class="grid-content">
        <el-col :span="8">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: beige" @click="searchType('算法设计初体验')">算法设计初体验</el-button>
        </el-col>
        <el-col :span="8">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: chartreuse" @click="searchType('搜索与回溯算法')">搜索与回溯算法</el-button>
        </el-col>
        <el-col :span="8">
          <el-button style="height:100%;width:100%;margin:0;display:block;background-color: deepskyblue" @click="searchType('二分答案')">二分答案</el-button>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "SourceAndTypeView",
  data(){

  },
  methods:{
    searchType(val){
      this.$router.push({path: '/problem', query: {qType: val}});
    },
  }
}
</script>

<style scoped>
.el-button {
  margin: 10px 10px 10px 10px;
}
.el-header{
  height: 20px;
}
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>